<template>
	<div>
        <mt-header fixed :title="title">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
		<div class="u-p-lr-20 u-margin-top-80 formWrap">
            <mt-field label="标题" placeholder="请输入标题" v-model="form.title"></mt-field>
            <mt-field label="内容" placeholder="请输入内容" type="textarea" rows="4" v-model="form.content"></mt-field>
			<div class="uploadWrap">
				<div class="uploadBox">
                    <img v-if="form.imageList.length>0" :src="baseUrl+form.imageList[0].url" />
                    <div class="noPic" v-else @click="chooseImage">
                        <u-icon name="plus" size="28px"></u-icon>
                        <span>选择图片</span>
                    </div>
                    <input type="file" name="" ref="chooseImg" style="visibility:hidden" accept="image/jpeg,image/jpg,image/png" @change="changeImage" />
                </div>
			</div>
			<div class="publishWrap fixed-bottom u-p-b-20">
				<div class="u-m-lr-10">
					<mt-button type="primary" @click="handleSave">发布</mt-button>
				</div>
			</div>
		</div>
        <mt-actionsheet
            :actions="actionSheetList"
            v-model="show">
        </mt-actionsheet>
	</div>
</template>

<script>
import uIcon from '../../components/u-icon.vue';
	export default {
  components: { uIcon },
		data() {
			return {
				title: '',
				show: false,
				form: {
					title: '',
					content: '',
					imageList: [],
				},
				upload: {},
				actionSheetList: [
                    {name: '是',method: this.actionSheetCallback},
                    {name: '否',method: this.actionSheetCallback}
                ],
                formData: '',
                baseUrl: this.getBaseUrl()
			}
		},
		created() {
			this.form.category = this.$route.query.type;
			this.title = '发游记';
		},
		methods: {
            chooseImage() {
                this.$refs.chooseImg.click();
            },
			handleSave() {
				if (this.form.title.length==0) {
                    this.$toast('请输入标题')
                } else if(this.form.content.length==0) {
                    this.$toast('请输入内容')
                } else {
                    this.$axios({
                        url: this.$api.addArticle,
                        method: 'post',
                        data: this.form
                    }).then(res => {
                        this.$toast('发布成功！');
                        this.$router.push({path: '/'})
                    });
                }
			},
            changeImage(e) {
                // console.log(e)
                var file = e.target.files[0];
                var formData = new FormData();
                formData.append("file", file);
                this.formData = formData;
                this.uploadImg();
            },
            uploadImg() {
                this.$axios({
                    url: this.$api.upload,
                    method: 'post',
                    headers: {
                        'Content-Type': 'multipart/form-data;'
                    },
                    data: this.formData
                }).then(res => {
                    this.form.imageList.push({
                        url: res.fileName,
                    });
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
.formWrap{
    text-align: left;
}
.publishWrap{
    padding: 15px;
    button{
        width: 100%;
    }
}
.uploadWrap{
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    &::before{
        content: '';
        display: block;
        width: calc(100% - 10px);
        margin-left: 10px;
        border-top: 1px #bdbdbd solid;
    }
}
.uploadBox{
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #f4f5f6;
    margin: 20px 0 20px 10px;
    overflow: hidden;
    img{
        width: 100px;
    height: 100px;
    }
    .noPic{
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span{
            font-size: 14px;
            padding-top: 10px;
        }
    }
}
</style>
